<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>4.methos 姓名案例</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="app">
      <h1>今天天气很：{{weather}}</h1>
      <h1>今日温馨提示：{{str}}</h1>
      <button @click="change">切换</button>
      <h1>{{number}}</h1>
      <button @click="++number">点击添加</button>
    </div>
  </body>

  <script type="text/javascript">
    //阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;
    let vm = new Vue({
      el: "#app", // 绑定视图
      data: {
        //存放数据
        bol: false,
        str: "",
        number:100
      },
      methods: {
        //普通方法  事件调用的
        change() {
          this.bol = !this.bol;
        },
      },
      computed: {
        //计算属性
        //简写形式默认执行get方法
        weather() {
          return this.bol ? "炎热" : "冷";
        },
      },
      watch: {
        bol: {//监听bol的变化
          handler() {
            this.str = this.bol ? "少穿点衣服" : "穿貂皮大衣";
          },
          deep: true,//深度监视
          immediate: true,//立即执行
        },
        number(){
            console.log("监听number的执行");
        }

      },
    });


    
    vm.$watch("bol",{//第一个参数，需要监听的数据
        handler(){
            console.log("当监听的数据发生变化时，自动执行")
            this.str = this.bol ? "少穿点衣服" : "穿貂皮大衣";
        }
    })

    console.log(vm);
  </script>
</html>
